<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #template {
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="template">
      <!-- 

        // 1. function xx() {}
        // 2. function () {}
        // 3. xx => {}
        // 4. (xx) => {}

        // 5. async function xx() {}
        // 6. async function () {}
        // 7. async xx => {}
        // 8. async (xx) => {} 
       -->

<!-- 
      <h1 id="1" @click="function xx(e) {add(e)}">1</h1>
      <h1 id="1" @click="function (e) {add(e)}">2</h1>
      <h1 id="1" @click="e => {add(e)}">3</h1>
      <h1 id="1" @click="(e) => {add(e)}">4</h1>
      <h1 id="1" @click="async function xx(e) {add(e)}">5</h1>
      <h1 id="1" @click="async function (e) {add(e)}">6</h1>
      <h1 id="1" @click="async (e) => {add(e)}">7</h1>
      <h1 id="1" @click="async e => {add(e)}">8</h1> -->
      <h1 id="1" @click="async event => await add(event)">7</h1>
      <h1>count: {{count}}</h1>
    </div>
    <div id="app"></div>
    <script src="../../../../packages/vue/dist/vue.global.js"></script>

    <script>
      const { createApp, ref } = Vue

      const template = document.querySelector('#template')?.innerHTML
      const App = {
        setup() {
          const count = ref(2)
          const add = async (event) => {
            console.log(event)
            count.value++
          }
          return {
            count,
            add
          }
        },
        template: `<h1 id="1" @click="async event => await add(event)">7</h1>`
      }

      createApp(App).mount('#app')
    </script>
    <script>
      const add = arg => {
        console.log(arg)
      }

      const fn = async e => {
        add(e)
      }

      const fn2 = async e => {
        add(e)
      }

      fn('fn')
      fn2('fn2')
    </script>
  </body>
</html>
